<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
</head>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
    $(function () {
        var wjx_s = "★";
        var wjx_k = "☆";
        //1. 给所有的li注册mouseenter事件
        $(".comment li").mouseenter(function () {
            //2. 让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心
            //前面兄弟：prevAll()：
            //后面兄弟：nextAll()：
            $(this).text(wjx_s).prevAll().text(wjx_s);
            $(this).nextAll(wjx_k);
        });
        //2. 离开ul的时候，把所有的li变成空心
        $(".comment").mouseleave(function () {
            $(this).children().text(wjx_k);
            //如果我知道了我刚刚点了那个五角星
            //可以让点的那个五角星以及前面的兄弟变成实心就可以。
            //4. 找到我点击的那个li
            $("li.current").text(wjx_s).prevAll().text(wjx_s)
        });
        //3. 给所有的li注册点击事件，点击的时候，留下点东西(class)
        $(".comment li").click(function () {
            $(this).addClass("current").siblings().removeClass("current")
        })
    })
</script>
<style>
    .comment {
        list-style: none;
    }

    .comment li {
        margin-left: 5px;
        float: left;
        font-size: 30px;
    }
</style>
<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</body>
</html>